<template>
    <div class="w-full h-full box-border flex flex-col overflow-y-hidden min-w-[1200px]">
        <header class="flex-none block">
            <div class="h-[68px] text-base text-third cursor-pointer touchable-opacity flex flex-row items-center gap-[6px]">
                <GpFontIcon name="icon-jiantou_zuo" class="text-2xl !leading-6" @click="handleBack()" />
                <span @click="handleBack()">返回上一级</span>
            </div>
        </header>
        <main class="flex-1 overflow-y-auto no-scrollbar">
            <div class="min-h-full pb-10">
                <div class="flex flex-row items-center gap-3 header-card">
                    <div class="flex flex-row justify-center items-center size-[28px] rounded-full flex-none bg-theme self-start">
                        <img src="/images/ai-knows-card-icon.png" :width="14" :height="14" class="w-[14px] h-[14px] object-cover" />
                    </div>
                    <div class="flex-1">
                        <h3 class="text-[28px] leading-8 font-bold text-primary mb-3">{{ data?.name }}</h3>
                        <a-space :size="64" :wrap="false" align="center" style="margin-block-end: 10px;">
                            <div class="text-secondary text-sm">
                                知识库类型：{{ data?.groupName }}
                            </div>
                            <div class="text-secondary text-sm">
                                最后更新：{{ data?.updateBy }} {{ data?.updateTime ? data.updateTime.split('T').shift() : '' }}
                            </div>
                        </a-space>
                        <div class="text-sm text-primary">
                            {{ data?.desc }}
                        </div>
                    </div>
                    <a-space align="center" :size="10">
                        <div class="touchable-opacity bg-white rounded-md flex justify-center items-center text-theme text-sm h-10 w-15"
                            @click="handelTriggerUpdate()"
                        >
                            编辑
                        </div>
                        <a-dropdown placement="bottomRight">
                            <div class="touchable-opacity bg-white rounded-md flex justify-center items-center text-theme text-sm size-10">
                                <GpFontIcon name="icon-gengduo" class="text-[#ACAEB2] !text-xl !leading-5" />
                            </div>
                            <template #overlay>
                                <a-menu @click="handleMenuAction">
                                    <a-menu-item key="remove">删除</a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </a-space>
                </div>
                <section class="mt-6">
                    <a-flex align="center" justify="space-between">
                        <a-flex :gap="10" align="center">
                            <div class="w-1 h-5 rounded-xs bg-theme"></div>
                            <div class="text-primary text-xl font-bold">共{{data?.detailCount}}条问答</div>
                        </a-flex>
                        <a-button type="primary" size="large" @click="handleItemAction('create')">
                            <template #icon>
                                <GpFontIcon name="icon-tianjia"/>
                            </template>
                            添加问答
                        </a-button>
                    </a-flex>
                    <div class="cards" v-if="data?.details">
                        <KnowCard v-for="item in data.details" :key="item.id" :item @action="handleItemAction" />
                    </div>
                </section>
            </div>
        </main>
        <AIKnowActionModal ref="AIKnowActionModalRef" @success="refreshAsync()" />
        <KnowItemActionModal ref="KnowItemActionModalRef" @success="refreshAsync()" />
    </div>
</template>
<script lang="ts" setup>
import { deleteKnowledgeKnowledgedeleteId, deleteKnowledgeKnowledgedetaildeleteId, getKnowledgeKnowledgedetailsKnowledgeId } from '@/api/siderBar/knowledge';
import type { Exposed as AIKnowActionModalExposed } from '../components/AIKnowActionModal/types';
import type { Exposed as KnowItemActionModalExposed } from './components/KnowItemActionModal/types';
import { message, Modal } from 'ant-design-vue';
import type { KnowledgeDetailResult } from '@/api/siderBar/model';

defineOptions({
    name: 'AIKnownDetailPage'
})
definePage({
    name: 'AIKnownDetailPage',
    meta: {
        title: '知识库详情',
        isLayout: false,
        navMatchedName: "AIKnownsPage"
    }
})
const { back } = useNavigate()
const route = useRoute()
const { data, refreshAsync } = useRequest(() => getKnowledgeKnowledgedetailsKnowledgeId(route.params.id))
const AIKnowActionModalRef = ref<AIKnowActionModalExposed>()
const KnowItemActionModalRef = ref<KnowItemActionModalExposed>()
function handelTriggerUpdate() {
    if (AIKnowActionModalRef.value) {
        AIKnowActionModalRef.value.open(toValue(data))
    }
}
function handleBack() {
    back({
        name: 'AIKnownsPage'
    })
}
function handleMenuAction({key}: { key: unknown }) {
    if (key === 'remove') {
        Modal.confirm({
            title: '确认提示',
            content: '确认要删除吗?',
            async onOk() {
                await deleteKnowledgeKnowledgedeleteId(data.value!.id)
                message.success('删除成功')
                handleBack()
            }
        })
    }
}
function handleItemAction(type: 'remove' | 'update' | 'create', item?: KnowledgeDetailResult) {
    if (type === 'remove') {
        Modal.confirm({
            title: '确认提示',
            content: '确认要删除吗?',
            async onOk() {
                await deleteKnowledgeKnowledgedetaildeleteId(item!.id)
                message.success('删除成功')
                refreshAsync()
            }
        })
    } else if (type === 'update' || type === 'create') {
        if (KnowItemActionModalRef.value) {
            KnowItemActionModalRef.value.open(route.params.id, item)
        }
    }
}
</script>
<style lang="less" scoped>
.header-card {
    background-image: url(/images/aiknows-detail-bg.png), linear-gradient(90deg, #EEF3FD 0%, #D9EBFF 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%, cover;
    background-position: right top, left top;
    border-radius: 12px;
    border: 1px solid #FFF;
    width: 100%;
    padding-block: 32px;
    padding-inline-start: 20px;
    padding-inline-end: 57px;
}
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 22px;
}
</style>